<template>
  <div>

    <el-form ref="registerForm"
             :model="form"
             label-width="auto"
             class="profile-box">

      <img src="../../../assets/image/profile.png" alt="" style="width: 150px;">

      <el-form-item label="账号" prop="username">
        <el-input type="text" v-model="form.username" disabled/>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input type="email" v-model="form.email" disabled/>
      </el-form-item>
      <el-form-item label="身份" prop="role">
        <el-row type="flex">
          <el-tag type="danger" effect="dark">发包方</el-tag>
        </el-row>
      </el-form-item>
      <el-form-item label="余额" >
        <el-row type="flex">
          <el-col :span="6">
            <el-icon v-if="loadingBalance" class="el-icon-loading"></el-icon>
            <span v-else>
              {{ balance }}
            </span>
          </el-col>
          <el-col :span="12">
            <el-button-group>
              <el-button @click="charge()" size="mini" type="danger">充值</el-button>
              <el-button @click="transactionDetail()" size="mini" type="danger">账户明细</el-button>
            </el-button-group>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import {getUserBalance} from "@/api/user";
export default {
  name: 'Profile',
  data() {

    return {
      form: {
        username: sessionStorage.getItem('username'),
        email: sessionStorage.getItem('email'),
        role: "boss"
      },
      balance: undefined,
      loadingBalance: false
    };
  },
  methods: {
    charge(){
      this.$router.push('/boss/charge');
    },
    transactionDetail(){
      this.$router.push('/boss/transactionDetail');
    },
    loadBalance(){
      this.loadingBalance = true;
      getUserBalance(sessionStorage.getItem('userid')).then(res => {
        if(res.code === 200){
          this.balance = res.data;
        }else{
          throw new Error(res.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      }).finally(() => {
        this.loadingBalance = false;
      })
    }

  },
  mounted() {
    this.loadBalance();
  }
}
</script>


<style scoped>

.profile-box {
  border: 1px solid #DCDFE6;
  width: 500px;
  margin: 5% auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 8px #909399;

  background-color: #f8f8f8;
}


</style>
